<template>   
    <el-row>
        <el-col :span="4" v-for="(item, index) in props.categoryData" :key="item.name">
            <div class="statistic_container" :style="{ backgroundColor: backGrandColor[index] }">
                <el-statistic :title="item.name" :value="item.value" :formatter="(value:number) => formatValue(value)" />
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { defineProps, } from "vue";
// 定义 Props 类型
const props = defineProps<{
    categoryData: any[];
}>();

const backGrandColor = ["#ff7e75", "#ffb849", "#a5d479", "#49e6db", "#5cbbff"];
// 对于统计数据进行格式化
const formatValue = (value: number) => {
    // 如果数值小于 10000，直接返回，不进行分割
    if (value < 10000) {
        return value;
    }
    // 否则，进行三位一分割的处理
    return value.toLocaleString();
};
</script>

<style scoped>

.el-col {
    text-align: center;
}

.statistic_container {
    background-origin: padding-box;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 0 20px;
    padding: 12px 0;
    .el-statistic {
        --el-statistic-title-font-size: 20px;
    }
}
</style>
